import React, { Component } from 'react'
import axios from 'axios'
import '../css/cineam.css'

export default class Cineam extends Component {
    state = {
        cineamList: [],

        // 备份版本的数据解决cineamList都会被覆盖
        bakcineamList: [],
    }

    constructor() {
        super()
        //axios 第三方库，专门用于请求数据
        // axios.get("https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=511756").then((res)=>{
        // }).catch((err)=>{})

        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=511756",
            method: "get",
            headers: {
                'x-client-info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17391935744702752965918721","bc":"110100"}',
                'x-host': 'mall.film-ticket.cinema.list'
            }
        }).then((res) => {
            console.log(res.data.data.cinemas)
            this.setState({
                cineamList: res.data.data.cinemas,
                bakcineamList: res.data.data.cinemas
            })
        })
    }

    //后面讲的生命周期函数 更适合发送ajax
    render() {
        return (
            <div>
                <div className='tabs-bar-wrapper'>
                    <div className='tabs-bar'>
                        <div>北京</div>
                        <div>影院</div>
                        <div>搜索</div>
                    </div>
                </div>
                <input onInput={(e) => this.search(e.target.value)} />
                <div>


                    {
                        this.state.cineamList.map((item) =>
                            <dl key={item.cinemaId}>
                                <div className='cinema-info-lf '>
                                    <div class="cinema-name">{item.name}</div>
                                    <br />
                                    <div class="cinema-address">{item.address}</div>
                                </div>

                                <div className='cinema-info-rt'>
                                    <span class="cinema-lowPrice price-fmt">
                                        <i>￥</i>
                                        <span className="interge sz-15" > {parseFloat(item.lowPrice.toString().slice(0, -2))}</span>
                                        <span >.</span>
                                        <span className="decimal sz-15" ></span>
                                        <span className="decimal sz-15" >00</span>
                                    </span>
                                    <span class="upon">起</span>
                                    <span class="cinema-gpsAddress">
                                        <strong>距离未知</strong>
                                    </span>
                                </div>

                            </dl>
                        )
                    }
                </div>

            </div>
        )
    }

    search = (value) => {
        console.log(value)
        var newList = this.state.bakcineamList.filter((item, index, arr) => {
            return item.name.toUpperCase().includes(value.toUpperCase() || item.address.toUpperCase().includes(value.toUpperCase()))
        })
        console.log('newList', newList);

        // 错误方法；因为每次cineamList都会被覆盖
        this.setState({
            cineamList: newList
        })

        console.log('this.state.cineamList', this.state.cineamList);
        
    }
}

/*
filter filter方法不影响原数组，返回一个新数组
*/

var arr = ['abc', 'aac', 'cxz'];

var newArr = arr.filter((item, index, arr) => {
    return item.includes('a')
})

// console.log('newArr', newArr)

